﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Анимация с задержкой и повторением</title>
<link rel="stylesheet" type="text/css" href="../lib/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../lib/raphael-min.js"></script>
<script type="text/javascript">
	$(function(){
		var paper = new Raphael($("#paper1")[0]);

		var square = paper.rect(50, 50, 100, 25).attr({ "fill": "green" });
		var anim = Raphael.animation({x: 100, y: 200, height: 125}, 750).delay(2000);
		
		square.animate(anim.repeat(2));

	});
</script>
</head>
<body>
	<h1>Анимация с задержкой и повторением</h1>
	<p>Источник: [1], стр. 64 "The Basics"</p>
	<p>Указания: анимация начнется через две секунды после загрузки страницы, после чего повторится снова.</p>
	<p>Особенности:</p>
	<ul>
		<li>для задержки начала анимации используется метод <span class="code">delay()</span></li>
		<li>для повторения анимации используется метод <span class="code">repeat()</span></li>
		<li>методы <span class="code">delay()</span> и <span class="code">repeat()</span> изменяют описание анимации, и могут быть вызваны в любое время</li>
	</ul>


	<div id="paper1" class="paper" style="width:600px; height:400px;">
	</div>
	
	<h2>Литература</h2>
	<ol>
		<li>Wilson, C. RaphaelJS Graphics and Visualization on the Web. O'Relly, 2013 г.</li>
	</ol>
</body>
</hmtl>